<template>
  <div class="device-report">
    <!-- Tab切换 -->
    <div class="tab-container">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="custom-tabs">
        <el-tab-pane label="电表结算流水统计" name="electric-settlement">
          <template slot="label">
            <span class="tab-label">
              <i class="el-icon-lightning"></i>
              电表结算流水统计
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="水表结算流水统计" name="water-settlement">
          <template slot="label">
            <span class="tab-label">
              <i class="el-icon-water-cup"></i>
              水表结算流水统计
            </span>
          </template>
        </el-tab-pane>
        <el-tab-pane label="流体表结算流水统计" name="fluid-settlement">
          <template slot="label">
            <span class="tab-label">
              <i class="el-icon-cpu"></i>
              流体表结算流水统计
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 搜索筛选区 -->
    <div class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="按日:">
          <el-button 
            :type="filterForm.timeType === 'day' ? 'primary' : 'default'"
            size="small"
            @click="setTimeType('day')"
          >
            按日
          </el-button>
        </el-form-item>
        <el-form-item label="按月:">
          <el-button 
            :type="filterForm.timeType === 'month' ? 'primary' : 'default'"
            size="small"
            @click="setTimeType('month')"
          >
            按月
          </el-button>
        </el-form-item>
        <el-form-item label="按年:">
          <el-button 
            :type="filterForm.timeType === 'year' ? 'primary' : 'default'"
            size="small"
            @click="setTimeType('year')"
          >
            按年
          </el-button>
        </el-form-item>
        <el-form-item label="日期:">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="—"
            start-placeholder="2025-01"
            end-placeholder="2025-07"
            value-format="yyyy-MM-dd"
            class="date-picker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="房间信息:">
          <el-input 
            v-model="filterForm.roomInfo" 
            placeholder="请输入"
            clearable
            class="filter-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="电表表号:">
          <el-select 
            v-model="filterForm.meterNumber" 
            placeholder="全部"
            clearable
            class="filter-select"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="表号001" value="001"></el-option>
            <el-option label="表号002" value="002"></el-option>
            <el-option label="表号003" value="003"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchData">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮区 -->
    <div class="action-container">
      <div class="action-buttons">
        <el-button type="success" icon="el-icon-document" @click="exportExcel">字段显示设置</el-button>
        <el-button type="primary" icon="el-icon-printer" @click="printReport">日期汇总导出</el-button>
        <el-button type="info" icon="el-icon-download" @click="downloadReport">电表汇总导出</el-button>
        <el-button type="warning" icon="el-icon-upload" @click="uploadReport">导出明细</el-button>
      </div>
    </div>
    <!-- 数据表格 -->
    <div class="table-container">
      <div class="table-header">
        <div class="table-title">
          <i class="el-icon-tickets"></i>
          设备报表数据
        </div>
        <div class="table-info">
          共 {{ tableData.length }} 条数据
        </div>
      </div>
      <el-table 
        :data="tableData" 
        border 
        stripe
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        class="custom-table"
        v-loading="loading"
        element-loading-text="加载中..."
      >
        <el-table-column prop="usageDate" label="用电日期" width="140" align="center"></el-table-column>
        <el-table-column prop="roomInfo" label="房间信息" width="120" align="center"></el-table-column>
        <el-table-column prop="tenantInfo" label="业主信息" width="120" align="center"></el-table-column>
        <el-table-column prop="phoneNumber" label="电话号码" width="140" align="center"></el-table-column>
        <el-table-column prop="meterNumber" label="电表表号" width="120" align="center"></el-table-column>
        <el-table-column prop="meterModel" label="电表倍率" width="100" align="center"></el-table-column>
        <el-table-column prop="startReading" label="起初电量(kwh)" width="140" align="center">
          <template slot-scope="scope">
            <span class="energy-value">{{ scope.row.startReading }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endReading" label="期末电量(kwh)" width="140" align="center">
          <template slot-scope="scope">
            <span class="energy-value">{{ scope.row.endReading }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="usageAmount" label="用电量(kwh)" width="120" align="center">
          <template slot-scope="scope">
            <span class="usage-value">{{ scope.row.usageAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="总" width="80" align="center">
          <template slot-scope="scope">
            <span class="total-value">{{ scope.row.totalAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="peakAmount" label="尖" width="80" align="center">
          <template slot-scope="scope">
            <span class="peak-value">{{ scope.row.peakAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="valleyAmount" label="谷" width="80" align="center">
          <template slot-scope="scope">
            <span class="valley-value">{{ scope.row.valleyAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="flatAmount" label="平" width="80" align="center">
          <template slot-scope="scope">
            <span class="flat-value">{{ scope.row.flatAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalCost" label="申核状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag 
              size="small" 
              :type="scope.row.auditStatus === '是' ? 'success' : 'warning'"
            >
              {{ scope.row.auditStatus }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          class="custom-pagination"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 字段显示设置弹窗 -->
    <el-dialog
      title="字段显示设置"
      :visible.sync="showFieldDialog"
      width="600px"
      class="custom-dialog"
    >
      <div class="field-dialog-content">
        <div class="field-tips">
          <el-alert
            title="请选择要显示的字段，拖拽可调整字段顺序"
            type="info"
            :closable="false"
            show-icon
          >
          </el-alert>
        </div>
        <div class="field-list">
          <el-checkbox-group v-model="selectedFields">
            <div class="field-item" v-for="field in availableFields" :key="field.key">
              <el-checkbox :label="field.key">{{ field.label }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showFieldDialog = false">取消</el-button>
        <el-button @click="resetFields">重置</el-button>
        <el-button type="primary" @click="saveFieldSettings">确定</el-button>
      </div>
    </el-dialog>
    <!-- 导出设置弹窗 -->
    <el-dialog
      title="导出设置"
      :visible.sync="showExportDialog"
      width="500px"
      class="custom-dialog"
    >
      <div class="export-dialog-content">
        <el-form :model="exportForm" label-width="120px">
          <el-form-item label="导出格式:">
            <el-radio-group v-model="exportForm.format">
              <el-radio label="excel">Excel格式</el-radio>
              <el-radio label="pdf">PDF格式</el-radio>
              <el-radio label="csv">CSV格式</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="导出范围:">
            <el-radio-group v-model="exportForm.range">
              <el-radio label="current">当前页数据</el-radio>
              <el-radio label="all">全部数据</el-radio>
              <el-radio label="selected">选中数据</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="文件名称:">
            <el-input v-model="exportForm.filename" placeholder="请输入文件名"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showExportDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmExport" :loading="exporting">
          {{ exporting ? '导出中...' : '开始导出' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import deviceReportMock from '@/api/mock/deviceReport'
export default {
  name: 'DeviceReport',
  data() {
    return {
      activeTab: 'electric-settlement',
      loading: false,
      exporting: false,
      tableData: [],
      filterForm: {
        timeType: 'day',
        dateRange: ['2025-01-01', '2025-07-31'],
        roomInfo: '',
        meterNumber: ''
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      showFieldDialog: false,
      showExportDialog: false,
      selectedFields: [
        'usageDate', 'roomInfo', 'tenantInfo', 'phoneNumber', 
        'meterNumber', 'meterModel', 'startReading', 'endReading',
        'usageAmount', 'totalAmount', 'peakAmount', 'valleyAmount',
        'flatAmount', 'auditStatus'
      ],
      availableFields: [
        { key: 'usageDate', label: '用电日期' },
        { key: 'roomInfo', label: '房间信息' },
        { key: 'tenantInfo', label: '业主信息' },
        { key: 'phoneNumber', label: '电话号码' },
        { key: 'meterNumber', label: '电表表号' },
        { key: 'meterModel', label: '电表倍率' },
        { key: 'startReading', label: '起初电量(kwh)' },
        { key: 'endReading', label: '期末电量(kwh)' },
        { key: 'usageAmount', label: '用电量(kwh)' },
        { key: 'totalAmount', label: '总' },
        { key: 'peakAmount', label: '尖' },
        { key: 'valleyAmount', label: '谷' },
        { key: 'flatAmount', label: '平' },
        { key: 'auditStatus', label: '申核状态' }
      ],
      exportForm: {
        format: 'excel',
        range: 'current',
        filename: '设备报表_' + new Date().toISOString().slice(0, 10)
      },
      headerCellStyle: {
        backgroundColor: '#f8f9fa',
        color: '#495057',
        fontWeight: 'bold',
        textAlign: 'center'
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      setTimeout(() => {
        const response = deviceReportMock
        this.tableData = response.msg.list
        this.pagination.total = response.msg.total
        this.loading = false
      }, 500)
    },
    handleTabClick(tab) {
      console.log('切换到:', tab.name)
      this.loadData()
    },
    setTimeType(type) {
      this.filterForm.timeType = type
      this.searchData()
    },
    searchData() {
      this.pagination.currentPage = 1
      this.loadData()
    },
    resetFilter() {
      this.filterForm = {
        timeType: 'day',
        dateRange: ['2025-01-01', '2025-07-31'],
        roomInfo: '',
        meterNumber: ''
      }
      this.loadData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.loadData()
    },
    exportExcel() {
      this.showFieldDialog = true
    },
    printReport() {
      this.exportForm.filename = '日期汇总报表_' + new Date().toISOString().slice(0, 10)
      this.showExportDialog = true
    },
    downloadReport() {
      this.exportForm.filename = '电表汇总报表_' + new Date().toISOString().slice(0, 10)
      this.showExportDialog = true
    },
    uploadReport() {
      this.exportForm.filename = '设备报表明细_' + new Date().toISOString().slice(0, 10)
      this.showExportDialog = true
    },
    resetFields() {
      this.selectedFields = this.availableFields.map(field => field.key)
    },
    saveFieldSettings() {
      this.$message.success('字段设置已保存')
      this.showFieldDialog = false
    },
    confirmExport() {
      this.exporting = true
      setTimeout(() => {
        this.$message.success('导出成功')
        this.exporting = false
        this.showExportDialog = false
      }, 2000)
    }
  }
}
</script>
<style scoped>
/* 主容器样式 */
.device-report {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}
/* 面包屑导航 */
.breadcrumb-nav {
  margin-bottom: 24px;
}
/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.page-title {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-title i {
  color: #e74c3c;
  font-size: 28px;
}
/* Tab容器 */
.tab-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  overflow: hidden;
}
.custom-tabs {
  padding: 0 24px;
}
.tab-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
/* 筛选容器 */
.filter-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  padding: 24px;
}
.filter-form {
  margin: 0;
}
.date-picker {
  width: 250px;
}
.filter-input {
  width: 150px;
}
.filter-select {
  width: 120px;
}
/* 操作按钮区 */
.action-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  padding: 20px 24px;
}
.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.action-buttons .el-button {
  border-radius: 8px;
  font-weight: 500;
}
/* 表格容器 */
.table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}
.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-title i {
  color: #e74c3c;
  font-size: 20px;
}
.table-info {
  color: #6c757d;
  font-size: 14px;
}
/* 数值样式 */
.energy-value {
  color: #3498db;
  font-weight: 600;
}
.usage-value {
  color: #e74c3c;
  font-weight: 600;
}
.total-value {
  color: #2c3e50;
  font-weight: 600;
}
.peak-value {
  color: #e67e22;
  font-weight: 600;
}
.valley-value {
  color: #27ae60;
  font-weight: 600;
}
.flat-value {
  color: #9b59b6;
  font-weight: 600;
}
/* 分页容器 */
.pagination-container {
  padding: 20px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: center;
}
.custom-pagination {
  text-align: center;
}
/* 字段设置弹窗 */
.field-dialog-content {
  padding: 20px;
}
.field-tips {
  margin-bottom: 20px;
}
.field-list {
  max-height: 400px;
  overflow-y: auto;
}
.field-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
.field-item:last-child {
  border-bottom: none;
}
/* 导出设置弹窗 */
.export-dialog-content {
  padding: 20px;
}
/* 响应式设计 */
@media (max-width: 768px) {
  .device-report {
    padding: 16px;
  }
  .filter-form {
    flex-direction: column;
  }
  .date-picker,
  .filter-input,
  .filter-select {
    width: 100%;
  }
  .action-buttons {
    flex-direction: column;
  }
  .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
</style>
